<template>
  <div>
    <input v-model="dept.deptno" id="logid" ref="logid" />
    {{ dept }}
    <button @click="btnf" ref="btn">Butt</button>
    <!-- <h1>Button1</h1>
    <button>{{ name }}</button>
    <input v-model="name" />
     {{ x }} : {{ y }}  
    <input v-model="x" />
    <input v-model="y" /> -->
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, watch, computed } from "vue";
const logid = ref(null);
const btnf = () => {
  // const input = document.getElementById("logid");
  console.log(logid.value);
};

const dept = ref({
  deptno: 10,
  danme: "研发部",
});

watch(
  dept,
  (d) => {
    console.log(d);
  },
  {
    deep: true,
    immediate: true,
  }
);

// watch(
//   () => dept.value.deptno,
//   (deptno) => {
//     console.log(dept.value);
//   }
// );

// const name = ref("dog");

// const x = ref(0);
// const y = ref(0);

// // 多个来源组成的数组
// watch([x, () => y.value], ([newX, newY], [oldX, oldY]) => {
//   console.log(`x is ${newX} and y is ${newY}`);
//   console.log(`x is ${oldX} and y is ${oldY}`);
// });

// const computed_sum = computed(() => x.value + y.value);
// // getter 函数
// watch(computed_sum, (value, oldValue) => {
//   console.log(`sum of x + y is: ${value}`);
//   console.log(`Old : ${oldValue}`);
// });

// watch(name, (value) => {
//   console.log(value);
// });

// watch(name, (value, oldValue) => {
//   console.log(value);
//   console.log(oldValue);
// });
</script>
